
<!--详情模块-->
<!--
此模块用到的方法有
1.onGoodsCollection  收藏方法 配合点击事件 @click使用
2.oncancelGoodsCollection 取消收藏方法 配合点击事件 @click使用
data主要参数
1.Goods.id 当前商品id
2.Goods.publisherUserId 发布作者id
3.Goods.userid 当前账号id
4.goodInfo 这个对象储藏当前商品的详细信息 可用goodInfo.XXX拿值(XXX的值从接口文档查看或者用vue调试工具查看data
  接口文档https://console-docs.apipost.cn/preview/d41f9dec4345a28b/b6e1bd31a3a725ce)
5.userInfo 这个数组储存发布该条商品的用户信息 可用 v-for="i in userInfo" {{i.XXX}} 拿值(XXX的值从接口文档查看或者用vue调试工具查看data)
6.bigImgPath 大图路径
-->
<template>
  <div>
    <el-row type="flex" justify="center" style="margin-top:30px">
      <el-col :span="13" class="top">

        <div class="box">
          <el-row type="flex" justify="center">
            <el-col :span="24">
              <!-- <el-col :span="1"><el-button @click="backHome()" style="padding: 10px 12px 10px 12px;border-radius: 10px;" type="primary"  icon="el-icon-arrow-left">返回</el-button></el-col> -->
              <!-- <div class="grid-content bg-purple-dark"></div> -->
              <el-col :span="5"  class="flex-img">
                <!-- <div class="grid-content "></div> -->
                <div v-for="(i, index) in goodInfo.imageList">
                  <img :src="i" alt="" :class="{ active: current == index }" class="lit-img" @click="switchImg(i, index)">
                </div>
              </el-col>
              <el-col :span="17">
                <!-- <div class="grid-content bg-purple"> -->
                <img :src="bigImgPath" alt="" class="main-img" style="float:left;margin-right: 30px;" />
                <!-- </div> -->
              <!-- </el-col>
              <el-col :span="10" class="right-content"> -->
                <div class="right-content">
                  <h3>{{ goodInfo.productTitleditys }}</h3>
                <p style="font-size:25px;color:#ee3f4d;margin:8px 0 8px 0">￥{{ goodInfo.price }}</p>
                <!-- <p>{{ userInfo[0].id }}</p> -->
                <img :src="userInfo[0].image" alt="" width="50px" height="50px"
                  style="border-radius:50px;margin-right:10px;" align="absmiddle">
                <span>{{ userInfo[0].usersName }}</span>
                <p><span class="bor">校区</span>{{ goodInfo.address == 1 ? '官塘校区' : '社湾校区' }}</p>
                <p><span class="bor">日期</span>{{ theDate }}</p>
                <p><span class="bor">浏览</span>{{ goodInfo.numberOfViewsditys }}</p>

                <el-button round class="el-button-buy" type="warning">立即购买</el-button>
                <el-button class="el-button-star" v-if="goodInfo.isCollection" @click="oncancelGoodsCollection"
                  style="font-size:20px"><i class="el-icon-star-on"></i></el-button>
                <el-button class="el-button-star" v-else @click="onGoodsCollection"><i
                    class="el-icon-star-off"></i></el-button>
                </div>
              </el-col>
            </el-col>
          </el-row>
          <el-row type="flex" justify="center">
            <el-col :span="18">
              <fieldset class="downbox" >
                <legend style="font-size:22px;">&nbsp;&nbsp;&nbsp;商品详情&nbsp;&nbsp;&nbsp;</legend>
                <p style="margin-top:25px;text-indent: 1em;color:#7a7374">{{ goodInfo.productDescriptionditys }}</p>
              </fieldset>
            </el-col>
          </el-row>
          
          <el-row type="flex" justify="center">
            <el-col :span="18">
              <fieldset class="downbox f_center" >
                <legend style="font-size:22px;margin-bottom: 50px;">&nbsp;&nbsp;&nbsp;其他商品&nbsp;&nbsp;&nbsp;</legend>
                <!-- <div v-for="i in goodList" >
                  <img :src="i.productImageditys" :title="i.productTitleditys" class="mid-img">
                </div> -->
                <el-tooltip  v-for="i in goodList" :key="i" class="item" effect="dark" :content="i.productTitleditys" placement="top-start">
                  <img :src="i.productImageditys" class="mid-img" @click="todetails(i.id,i.userId)">
                </el-tooltip>
              </fieldset>
            </el-col>
          </el-row>


        </div>
      </el-col>
    </el-row>

  </div>

</template>


<script>
import { getGood, GoodsCollection, cancelGoodsCollection } from '@/api/details'
import { getGoodsPage } from '@/api/home';
export default {
  data() {
    return {
      Goods: {
        id: this.$route.query.goodId,
        publisherUserId: this.$route.query.publisherUserId,
        userid: JSON.parse(localStorage.getItem("user")).id
      },
      goodInfo: {},
      userInfo: {},
      goodList:[],
      current:"",
      bigImgPath: "",
      fromPath:"",
      theDate:"",
    }
  },
  created() {
    this.Good();
    this.getGoodList();
  },
  methods: {
    //返回上级
    backHome(){
      // this.$router.go(1);
    },
    //切换大图
    switchImg(address,index) {
      this.bigImgPath = address;
      this.current=index;
      // console.log(address);
    },
    // 获取详情的方法
    Good() {
      getGood(this.Goods).then(res => {
        // console.log(res.goodInfo);
        var d = res.goodInfo.publishTimeditys;
        this.theDate = d.substring(0,10);
        if (res.code == 200) {
          this.goodInfo = res.goodInfo
          this.userInfo = res.userinfo
          this.bigImgPath = this.goodInfo.imageList[0];
        }
      })
    },
    //获取商品信息
    getGoodList(){
      getGoodsPage({ pagesize: 10000 }).then(res =>{
        var max = res.length;
        console.log(max);
        for(var i=0;i<4;i++){
          this.goodList.push(res[Math.floor(Math.random()*max)]);
        }
        console.log(this.goodList);
        // console.log(res[0]);
        // this.goodList = res;
        // this.goodList.length = 4;
        // console.log(res);

        
      })
    },  
    // 收藏
    onGoodsCollection() {
      GoodsCollection({ goodsId: Number(this.Goods.id), userId: this.Goods.userid }).then(
        (res) => {
          // console.log(res);
          this.goodInfo.isCollection = res.data;
          this.$message({
            showClose:true,
            message:"收藏成功",
            type:'success'
          });
        }
      )
    },
    // 取消收藏
    oncancelGoodsCollection() {
      cancelGoodsCollection({ goodsId: Number(this.Goods.id), userId: this.Goods.userid }).then(
        (res) => {
          // console.log(1)
          // console.log(res);
          this.goodInfo.isCollection = res.data;
          this.$message({
            showClose:true,
            message:"取消收藏",
            type:'success'
          });
        }
      )
    },
    //跳转详情页
    todetails(goodid, publisherUserId) {
      this.$router.push("/Details?goodId=" + goodid + "&publisherUserId=" + publisherUserId);
      // window.location.reload();
      this.$router.go(0);
    },

  }
}

</script>

<style scoped>
.f_center{
  display: flex;
  justify-content: space-between;
  /* margin-top: 20px;
  margin-bottom: 20px; */
}
.box{
  border-radius: 30px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding:36px 20px 50px 14px;
}

.mid-img{
  width: 100px;
  height: 100px;
}

.mid-img:hover{
  cursor: pointer;
}
.downbox{
  border-top: 1px solid gray;
  border-bottom: none;
  border-left: none;
  border-right: none;
  padding:0 30px 0 30px;
  color:#a7a8bd;
  margin-top: 50px;
}

.downbox legend{
  margin-left: 20px;
}

.top{
  padding-bottom: 50px;
}
.lit-img {
  height: 50px;
  width:  50px;
  margin: 5px 10px 5px 10px;
  border: 1px solid white;
  float: right;
}

.active{
  border: 1px solid red;
}

.main-img {
  height: 300px;
  width: 300px;
}

.right-content p{
  margin: 15px 0 15px 0;
  /* float: left; */
}

.bor{
  border-radius: 30px;
  background: #45b787;
  padding: 5px 10px 5px 10px;
  margin: 0 10px 0 0;
  color: white;
  font-size: 14px;
}

.el-icon-star-off,.el-icon-star-on{
  font-size: 26px;
  color:white;
}

.el-button-star{
  background: #45b787;
  padding: 10px;
  border-radius: 50%;
  margin-left: 20px;
  position: relative;
  top:3px
}

.el-button-star:hover{
  background: #36926c;
}

.el-button-buy{
  font-size: 18px;
  border-radius: 50px;
}

.flex-img{
  display: flex;
  flex-direction: column;
  align-content: flex-end;
  /* flex-wrap: wrap; */
  /* justify-content: flex-end; */
  
}



.grid-content {
  border-radius: 4px;
  min-height: 36px;
  max-height: 300px;
}
</style>
